<template>
  <div>
    <el-card>
      <el-form size="small" :inline="true" :model="queryInfo" ref="queryFormRef">
        <el-form-item label="岗位名称" prop="staName">
          <el-input v-model="queryInfo.staName" clearable placeholder="请输入岗位搜索"></el-input>
        </el-form-item>

        <el-form-item label="岗位类型" prop="staType">
          <el-select v-model="queryInfo.staType">
            <el-option label="全部" value></el-option>
            <el-option label="管理" :value="1"></el-option>
            <el-option label="技术" :value="2"></el-option>
            <el-option label="营销" :value="3"></el-option>
            <el-option label="市场" :value="4"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button size="mini" type="primary" @click="handleQuery">查询</el-button>
          <el-button size="mini" @click="resetQueryForm">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- 操作区 -->
      <div class="operation">
        <el-button size="mini" type="primary" icon="el-icon-plus" @click="addStation">添加</el-button>
      </div>
      <!-- 表格 -->
      <el-table
        :data="stationData"
        tooltip-effect="dark"
        :header-cell-style="{ background: '#f8f8f9', color: '#515a6e' }"
        style="width: 100%;"
        v-loading="loading"
      >
        <el-table-column type="index" label="#" width="80" align="center"></el-table-column>
        <el-table-column prop="staName" label="岗位名称" width="120" align="center"></el-table-column>
        <el-table-column label="岗位类型" width="120" align="center">
          <template slot-scope="scope">{{ ["管理", "技术", "营销", "市场"][scope.row.staType - 1] }}</template>
        </el-table-column>
        <el-table-column prop="staCapacity" label="岗位容量" width="120" align="center"></el-table-column>
        <el-table-column prop="countStaId" label="当前岗位人数" width="120" align="center"></el-table-column>
        <el-table-column label="创建时间" align="center">
          <template slot-scope="{ row }">
            {{
            row.createTime | formatDate
            }}
          </template>
        </el-table-column>
        <el-table-column label="更新时间" align="center">
          <template slot-scope="{ row }">
            {{
            row.updateTime | formatDate
            }}
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-edit" @click="mdfStation(scope.row)">修改</el-button>
            <el-button type="text" icon="el-icon-delete" @click="handleDelOneSta(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="getStations"
        @current-change="getStations"
        :current-page.sync="queryInfo.pageNum"
        :page-sizes="[10, 20, 30]"
        :page-size.sync="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="30%" @close="dialogClose">
      <el-form
        :model="staForm"
        :inline="true"
        ref="addStaFormRef"
        :rules="addRules"
        label-width="80px"
      >
        <el-form-item label="岗位名称" prop="staName">
          <el-input v-model="staForm.staName" clearable placeholder="岗位名称"></el-input>
        </el-form-item>
        <el-form-item label="岗位类型" prop="staType">
          <el-select v-model="staForm.staType">
            <el-option label="管理" :value="1"></el-option>
            <el-option label="技术" :value="2"></el-option>
            <el-option label="营销" :value="3"></el-option>
            <el-option label="市场" :value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="岗位容量" prop="staCapacity">
          <el-input v-model.number="staForm.staCapacity" clearable placeholder="岗位容量"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer" :state="state">
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
        <el-button v-if="state === 'mdf'" @click="dialogVisible = false">取 消</el-button>
        <el-button v-else @click="resetForm('addStaFormRef')">重 置</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  listStationApi,
  insertStaApi,
  mdfStaApi,
  delOneStaApi,
  // delListStaApi,
  getStationByIdApi,
} from "@/api/station";
export default {
  data() {
    return {
      queryInfo: {
        // 当前页
        pageNum: 1,
        // 页大小
        pageSize: 10,
        //岗位名称
        staName: "",
        //岗位类型
        staType: "",
      },
      total: 0,
      multipleSelection: [],
      dialogVisible: false,
      loading: false,
      stationData: [],
      staForm: {
        staName: "",
        staType: "",
        staCapacity: "",
      },
      title: "",
      state: "",
      addRules: {
        staName: [
          {
            required: true,
            message: "请输入岗位名称",
            trigger: "change",
          },
        ],
        staCapacity: [
          {
            required: true,
            message: "岗位容量不为空且为数字",
            trigger: "change",
            type: "number",
          },
        ],
      },
    };
  },
  methods: {
    async getStations() {
      try {
        this.loading = true;
        const { data, code } = await listStationApi(this.queryInfo);
        if (code !== 200) return;
        this.stationData = data.stations;
        this.total = data.total;
      } finally {
        this.loading = false;
      }
    },
    //处理查询
    handleQuery() {
      this.queryInfo.pageNum = 1;
      this.getStations();
    },
    //处理重置
    resetForm(formName) {
      if (this.$refs[formName] !== undefined) {
        this.$refs[formName].resetFields();
      }
    },
    //处理
    handleSubmit() {
      if (this.state === "add") {
        this.$refs.addStaFormRef.validate(async (valid) => {
          if (!valid) return;
          const { code } = await insertStaApi(this.staForm);
          if (code !== 200) return;
          this.$message.success("操作成功");
          this.dialogVisible = false;
          this.getStations();
        });
      } else if (this.state === "mdf") {
        this.$refs.addStaFormRef.validate(async (valid) => {
          if (!valid) return;
          const { code } = await mdfStaApi(this.staForm);
          if (code !== 200) return;
          this.$message.success("操作成功");
          this.dialogVisible = false;
          this.getStations();
        });
      }
    },
    addStation() {
      this.title = "添加岗位";
      this.state = "add";
      this.dialogVisible = true;
    },
    async getStationById(id) {
      const { data, code } = await getStationByIdApi(id);
      if (code !== 200) return;
      this.staForm = data;
    },
    mdfStation(sta) {
      this.title = "修改信息";
      this.state = "mdf";
      this.getStationById(sta.id);
      this.dialogVisible = true;
    },
    //删除岗位
    handleDelOneSta(sta) {
      this.confirm(`删除岗位${sta.staName}`, async () => {
        const { code } = await delOneStaApi(sta.id);
        if (code !== 200) return Promise.reject();
        this.getStations();
      });
    },
    // 封装应答框
    confirm(title, cb, operation = "删除") {
      this.$confirm(`此操作将${title}, 是否继续?`, {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          try {
            await cb();
            this.$message.success(`${operation}成功!`);
          } catch {
            this.$message.error(`${operation}失败!`);
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: `已取消${operation}`,
          });
        });
    },
    dialogClose() {
      this.resetForm("addStaFormRef");
    },
    resetQueryForm() {
      this.$refs.queryFormRef.resetFields();
      this.getStations();
    },
  },
  created() {
    this.getStations();
  },
};
</script>

<style lang="scss" scoped>
.operation {
  .el-button {
    margin-bottom: 18px;
  }
}
.el-pagination {
  margin: 18px 0px;
  float: right;
}
</style>
